<template>
  <el-dialog :loading="loading" :title="title" @close="close" @save="saveClick" :append-to-body="true">
    <create-sections title="基本信息">
      <el-form ref="rpForm" :model="fieldForm" :rules="fieldRules" :validate-on-rule-change="false" class="rp-form" inline
        label-position="top">
        <form-item-more v-for="(children, index) in columnList" :key="index" :field-from="fieldForm"
          :field-list="children" :ignore-fields="['leadsName']" @change="formChange">
          <template slot-scope="{ data }">
            <rp-relative-cell v-if="data && data.formType == 'customer'" :value="fieldForm[data.field]"
              :disabled="data.disabled" relative-type="customer" @value-change="otherChange($event, data)" />

            <!-- <xh-business-status v-if="data && data.formType == 'business_type'" :value="fieldForm[data.field]"
                  :disabled="data.disabled" @value-change="otherChange($event, data)" />
                <xh-product v-if="data && data.formType == 'product'" :value="fieldForm[data.field]"
                  @value-change="otherChange($event, data)" /> -->
            <el-select v-if="data && data.formType == 'business_status'" v-model="fieldForm[data.field]"
              :disabled="data.disabled" style="width: 100%;">
              <el-option v-for="(item, index) in data.setting" :key="index" :label="item.name" :value="item.statusId" />
            </el-select>
          </template>
        </form-item-more>
      </el-form>
    </create-sections>
  </el-dialog>
</template>

<script>

import CreateSections from "@/components/CreateSections";

import FormItemMore from '@/components/busComponents/NewComponents/BusForm/FormItemMore'

import RpRelativeCell from "@/components/CreateCom/RpRelativeCell.vue";

import CustomFieldsMixin from '@/mixins/CustomFields'

export default {
  // 新建编辑
  name: 'RelativeAddressCreate',

  components: {
    CreateSections,
    RpRelativeCell,
    FormItemMore
  },
  mixins: [CustomFieldsMixin],
  props: {
    phone: String,
    action: {
      type: Object,
      default: () => {
        return {
          type: 'save',
          id: '',
          data: {}
        }
      }
    }
  },

  data () {
    return {
      loading: false,
      fieldList: [],
      fieldForm: {},
      fieldRules: {}
    }
  },

  computed: {
    title () {
      return this.action.type === 'update' ? '编辑地址' : '新建地址'
    }
  },

  watch: {
    action: {
      handler () {
        this.getField()
      },
      deep: true
    }
  },

  created () {
    this.getField()
  },

  mounted () { },

  beforeDestroy () { },

  methods: {
    /**
     * 获取数据
     */
    getField () {
      const detailData = this.action.type == 'update' ? this.action.rowData : null
      this.fieldList = [
        [{
          fieldName: 'addressType',
          field: 'addressType',
          name: '地址类型',
          formType: 'select',
          isNull: 1,
          fieldType: 1,
          inputTips: '',
          setting: [
            { label: '办公地址', value: 1 },
            { label: '仓储地址', value: 2 },
            { label: '注册地址', value: 3 },
            { label: '门店地址', value: 4 },
            { label: '家庭地址', value: 5 },
            { label: '其它', value: 6 }
          ],
          stylePercent: 50,
          value: detailData ? detailData.addressType : ''
        },
        {
          fieldName: 'postalCode',
          field: 'postalCode',
          name: '邮政编码',
          formType: 'text',
          isNull: 0,
          fieldType: 1,
          inputTips: '',
          setting: [],
          stylePercent: 50,
          value: detailData ? detailData.postalCode : ''
        }],
        [{
          fieldName: 'contactsName',
          field: 'contactsName',
          name: '联系人',
          formType: 'text',
          isNull: 0,
          fieldType: 1,
          inputTips: '',
          setting: [],
          stylePercent: 50,
          value: detailData ? detailData.contactsName : ''
        },
        {
          fieldName: 'telephone',
          field: 'telephone',
          name: '联系方式',
          formType: 'mobile',
          isNull: 0,
          fieldType: 1,
          inputTips: '',
          setting: [],
          stylePercent: 50,
          value: detailData ? detailData.telephone : ''
        }],
        [{
          fieldName: 'address',
          field: 'address',
          name: '地址',
          // formType: 'position',
          formType: 'text',
          isNull: 0,
          fieldType: 1,
          inputTips: '',
          setting: [],
          stylePercent: 100,
          value: detailData ? detailData.address : ''
        },
        {
          fieldName: 'remark',
          field: 'remark',
          name: '备注',
          formType: 'textarea',
          isNull: 0,
          fieldType: 1,
          inputTips: '',
          setting: [],
          stylePercent: 50,
          value: detailData ? detailData.remark : ''
        }]
      ]
      this.fieldList.forEach(item => {
        item.forEach(subItem => {
          this.$set(this.fieldForm, subItem.fieldName, subItem.value)
          this.$set(this.fieldRules, subItem.fieldName, this.getRules(subItem))
        })
      })
    },

    /**
     * 保存
     */
    saveClick () {
      this.loading = true
      const crmForm = this.$refs.crmForm
      crmForm.validate(valid => {
        if (valid) {
          const params = this.fieldForm
          this.submiteParams(params)
        } else {
          this.loading = false
          // 提示第一个error
          this.getFormErrorMessage(crmForm)
          return false
        }
      })
    },

    /**
     * 提交上传
     */
    submiteParams (params) {
      let request = crmCustomerSaveAddressAPI
      params.customerId = this.action.detail.customerId
      if (this.action.type == 'update') {
        params.addressId = this.action.rowData.addressId
        request = crmCustomerUpdateAddressAPI
      }

      // 相关添加时候的多余提交信息
      if (
        this.action.relativeData &&
        Object.keys(this.action.relativeData).length
      ) {
        params = { ...params, ...this.action.relativeData }
      }
      request(params)
        .then(res => {
          this.loading = false

          this.$message.success(
            this.action.type == 'update' ? '编辑成功' : '添加成功'
          )

          this.close()

          // 保存成功
          this.$emit('save-success', {
            type: 'address'
          })
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 验证唯一
     */
    UniquePromise ({ field, value }) {
      return this.getUniquePromise(field, value, this.action)
    },

    /**
     * change
     */
    formChange (field, index, value, valueList) {
      if ([
        'select',
        'checkbox'
      ].includes(field.formType) &&
        field.remark === 'options_type' &&
        field.optionsData) {
        const { fieldForm, fieldRules } = this.getFormContentByOptionsChange(this.fieldList, this.fieldForm)
        this.fieldForm = fieldForm
        this.fieldRules = fieldRules
      }
    },

    /**
     * 地址change
     */
    otherChange (data, field) {
      this.$set(this.fieldForm, field.field, data.value)
      this.$refs.crmForm.validateField(field.field)
    },

    /**
     * 关闭
     */
    close () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped></style>
